<script setup lang="ts">
import { onMounted } from 'vue'
const initMap = () => {
  // 创建地图实例
  const map = new BMap.Map('map')

  // 创建地址解析器实例
  const geocoder = new BMap.Geocoder()

  // 将地址解析结果显示在地图上，并调整地图视野
  geocoder.getPoint(
    '竹林路',
    function (point: any) {
      if (point) {
        map.centerAndZoom(point, 18) // 将解析的地理位置设置为地图中心点，并设置缩放级别
        map.addOverlay(new BMap.Marker(point)) // 在地图上添加标注
      } else {
        alert('您输入的地址无法解析!')
      }
    },
    '许昌'
  ) // 指定地址解析时的城市，可以根据实际情况修改
}
onMounted(() => {
  initMap()
})
</script>

<template>
  <div id="map" style="width: 50%; height: 50vh; margin: 100px auto"></div>
</template>

<style>
#map {
  border: 1px solid #ccc;
}
</style>
mapmapmap
